<template>
    <div class="comment-container">
        <h1>发表评论</h1>
        <hr>
        <textarea name="" placeholder="请发表你的评论" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postComment()">发表评论</mt-button>
        <div class="comment" v-for="(item,i) in comment" :key="i">
            <div class="comment_titile">
                第{{ i+1 }}楼&nbsp;&nbsp;{{  item.use_name }} &nbsp;:&nbsp;匿名用户&nbsp;&nbsp;发表时间&nbsp;:&nbsp;{{ item.add_time | dateFormat }}
            </div>
            <div class="comment_content">
                {{ item.content }}
            </div>
        </div>
        <mt-button plain size="large" type="danger" @click="increat()">加载更多</mt-button>
    </div>
</template>


<script>
export default{
    data(){
        return {
            //存储父组件传递过来的id标识符
            newsId:this.$route.params.id,
            //默认pageindex是1
            pageindex:1,
            comment:[],
            msg:""
        }
    },
    created(){
        this.getCommentList();
    },
    methods:{
        getCommentList(){
            this.$http.get("http://www.liulongbin.top:3005/api/getcomments/"+this.newsId+"?"+"pageindex="+this.pageindex).then(result => {
                if(result.body.status===0){
                    this.comment=this.comment.concat(result.body.message);
                }
            })
        },
        increat(){
            this.pageindex++;
            this.getCommentList();
        },
        postComment(){
            // 在提交数据之前，要判断数据是否为空，如果为空，就提时用户输入评论
            if(this.msg.trim().length===0){
                return console.log("评论的内容不能为空");
            }
            this.$http.post("http://www.liulongbin.top:3005/api/postcomment/"+this.id,{"content":this.msg},{emulateJSON:true}).then(result => {
                if(result.body.status===0){
                    // 拼接一个标准的数据格式
                    var cmt={
                        user_name:"匿名用户",
                        add_time:Date.now(),
                        content:this.msg
                    };
                    // 添加进数组
                    this.comment.unshift(cmt);
                    this.msg="";
                }
            })
        }
    },
    props:["id"],
}

</script>



<style lang="less" scoped>
.comment-container{
    h1{
        font-size: 15px;
    }
    textarea{
        font-size:14px;
        height:85px;
        margin-bottom: 0;
    }
    .comment{
        font-size:13px;
        .comment_titile{
        background-color: #eee;
        line-height: 30px;
        }
        .comment_content{}
            line-height:35px;
            text-indent:2rem;
    }
}


</style>